<template>
  <div class="solution-total" :class="isBlue ? '' : 'blue'">
    <div class="container">
      <h1 style="text-align: center; margin: 70px 0 80px 0" v-if="isTitle">
        亿拓SCRM解决方案
      </h1>

      <div class="cnt" :class="isTitle ? '' : 'marginTopHeight'" v-if="isLeft">
        <div class="left-cnt">
          <h1>{{ title }}</h1>
          <div class="details">
            {{ details }}
          </div>
          <ul>
            <li v-for="item in leftList" :key="item.id">
              <p>
                <img
                  src="../assets/img/keyPoints.png"
                  style="
                    width: 14px;
                    height: 14px;
                    position: relative;
                    top: 2px;
                    margin-right: 10px;
                  "
                  alt=""
                />
              </p>
              <p>{{ item.title }}</p>
            </li>
          </ul>

          <div class="btn">马上申请试用</div>
        </div>
        <div class="right-cnt">
          <div class="block">
            <el-carousel
              trigger="click"
              :autoplay="false"
              height="406px"
              width="674px"
            >
              <el-carousel-item v-for="(item, index) in urlList" :key="index">
                <img
                  :src="item.src"
                  style="width: 674px; height: 406px"
                  alt=""
                />
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>

      <div class="cnt" :class="isTitle ? '' : 'marginTopHeight'" v-else>
        <div class="right-cnt" style="margin-right: 41px">
          <div class="block">
            <el-carousel
              trigger="click"
              :autoplay="false"
              height="406px"
              width="674px"
            >
              <el-carousel-item v-for="(item, index) in urlList" :key="index">
                <img
                  :src="item.src"
                  style="width: 674px; height: 406px"
                  alt=""
                />
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
        <div class="left-cnt">
          <h1>{{ title }}</h1>
          <div class="details">{{ details }}</div>
          <ul>
            <li v-for="item in leftList" :key="item.id">
              <p>
                <img
                  src="../assets/img/keyPoints.png"
                  style="
                    width: 14px;
                    height: 14px;
                    position: relative;
                    top: 2px;
                    margin-right: 10px;
                  "
                  alt=""
                />
              </p>
              <p>{{ item.title }}</p>
            </li>
          </ul>

          <div class="btn">马上申请试用</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Solution",
  props: ["isTitle", "isLeft", "isBlue", "sort"],

  data() {
    return {
      leftList: [],
      title: "",
      details: "",
      url: "",
      urlList: [],
    };
  },

  watch: {
    sort: {
      handler(n, o) {
        if (n === 9) {
          this.leftList = [
            { id: 1, title: "海量海报模板" },
            { id: 2, title: "营销内容侧边栏" },
            { id: 3, title: "多种裂变工具" },
            { id: 4, title: "内容互动雷达" },
          ];
          this.title = "多种营销工具助力转化";
          this.details = "12种内容素材，多种营销工具，获客转化一步到位";
          this.urlList = [
            { id: 1, src: require("../assets/img/tab4_pic1.png") },
            { id: 2, src: require("../assets/img/tab4_pic2.png") },
          ];
        }
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>

<style lang="scss">
.solution-total {
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }
  .el-carousel__arrow--left {
    display: none !important;
  }
  .el-carousel__arrow--right {
    display: none !important;
  }
  .el-carousel__container {
    width: 674px !important;
  }
  .is-active {
    .el-carousel__button {
      background: rgb(69, 116, 247);
    }
  }
  .el-carousel__button {
    //   display: none !important;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgb(171, 197, 253);
    // display: inline-block;
    // width: 2px;
    // height: 2px;
    // background: rgb(171, 197, 253);
    // margin: 0 10px;
    // border-radius: 50%;
  }

  //   .el-carousel__indicator--horizontal {
  //       display: inline-block;
  //       width: 2px;
  //       height: 2px;
  //       background: rgb(171,197,253);
  //       margin: 0 10px;
  //       border-radius: 50%;
  //   }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
}
</style>

<style lang="scss" scoped>
.blue {
  background: #f8fbff;
}
.solution-total {
  width: 100%;
  overflow: hidden;
  li {
    list-style-type: none;
  }
  .marginTopHeight {
    margin-top: 75px !important;
  }
  .container {
    width: 1250px;
    margin: 0 auto;

    .cnt {
      display: flex;
      justify-content: space-between;
      margin-bottom: 81px;
    }
    h1 {
      font-size: 36px;
      font-family: PingFangSC;
      font-weight: 600;
      color: #333333;
    }
    .left-cnt {
      margin-top: 73px;
      ul {
        display: flex;
        flex-wrap: wrap;
      }
      li {
        display: flex;
        font-size: 14px;
        font-family: PingFangSC;
        font-weight: 400;
        color: #999999;
        width: 50%;
        margin-bottom: 21px;
      }
      h1 {
        font-size: 28px;
        font-family: PingFangSC;
        font-weight: 400;
        color: #333333;
      }
      .details {
        font-size: 14px;
        font-family: PingFangSC;
        font-weight: 400;
        color: #999999;
        margin: 28px 0 40px 0;
      }
      .btn {
        width: 200px;
        height: 50px;
        background: linear-gradient(90deg, #4574f7, #00a6ff);
        border-radius: 6px;
        font-size: 14px;
        font-family: PingFangSC;
        font-weight: 400;
        color: #ffffff;
        line-height: 50px;
        text-align: center;
        margin-top: 39px;
        cursor: pointer;
      }
    }
  }
}
</style>